<template>
  <div class="doc_10">
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559182998231-19143e54-de7c-4b1c-b009-85b85ed3a19c.png" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_10_1">1. 视频组</h2>
    <p>常用插件，适用于多个视频，横向滑动切换展示；可拖拽视频项调整视频位置；</p>
    <p>
      <ol>
        <li>添加视频：点击添加视频到视频组；</li>
        <li>视频地址：点击从媒体中选择视频；</li>
        <li>视频封面：点击从媒体中选择图片作为视频封面；</li>
        <li>播放按钮颜色：设置播放按钮颜色；</li>
        <li>自动翻页：设置视频项是否自动切换；</li>
      </ol>
    </p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559184198275-e209ddb4-1ec1-4e1c-91ba-71e31ae7b9b5.png?x-oss-process=image/resize,w_866" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_10_2">2. 外部链接视频组</h2>
    <p>同上；</p>
    <p></p>

    <h2 id="doc_10_3">3. 图片组</h2>
    <p>同上；</p>
    <p></p>

    <h2 id="doc_10_4">4. 通用列表</h2>
    <p>列表组件类型：</p>
    <h3>a. 小图点击看大图</h3>
    <p>展示时，可点击图片查看大图；</p>
    <p>
      <ol>
        <li>列数：设置列数；</li>
        <li>上下边距：设置图片上下间隔；</li>
        <li>左右边距：设置图片左右间隔；</li>
      </ol>
    </p>

    <h3>b. 好物进化论</h3>
    <p>此列表组件为强业务类型组件，需要配合 事件 使用；</p>
    <p>首先，选择 事件>添加事件：转发组；</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559187883551-25e6e773-7fea-485f-bf4d-8adaa3f06f3b.png?x-oss-process=image/resize,w_726" alt="">
      </span>
    </p>
    <p></p>
    <p>然后回到通用列表编辑界面，在 转发博文组 中，增加内容；</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559187980576-51a56255-e8e5-4019-8ee8-d7efd3bef12b.png?x-oss-process=image/resize,w_720" alt="">
      </span>
    </p>
    <p></p>
    <p>此时，通用列表原有增加内容项失效，并被隐藏不可编辑；</p>

    <h3>c. 单选按钮组</h3>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559189052189-5e0511e1-2ea0-4d12-8438-edb04d4bd489.png?x-oss-process=image/resize,w_716" alt="">
      </span>
    </p>
    <p></p>
    <h3>d. 通用列表组</h3>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559189292482-48913c08-dafd-49b9-bdbb-7f2c9a970a18.png?x-oss-process=image/resize,w_716" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_10_5">5. 地图</h2>
    <p>注意⚠️：请保证地址解析成功；地址解析成功则视图更新！</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559189877439-6ff44174-cd50-4468-ba92-87deb103187a.png?x-oss-process=image/resize,w_766" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_10_6">6. 计时</h2>
    <p>
      <ol>
        <li>计时类型：a. 倒计时；b. 正计时；</li>
        <li>截止时间：设置倒计时的结束时间；</li>
        <li>开始时间：设置正计时的开始时间；</li>
        <li>显示精度：天/时/分/秒</li>
        <li>分割样式：a. 中文： 0天 00小时09分钟33秒；b. 符号： 0天 00:09:11</li>
      </ol>
    </p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559206949957-d6701f79-f2be-47af-8d06-9ecc91cd0f78.png?x-oss-process=image/resize,w_1022" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_10_7">7. 分享</h2>
    <p>提示用户分享；</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559207119899-76a6bb10-a2b4-4143-a762-6f3aa83c233a.png" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_10_8">8. 二维码</h2>
    <p>
      <ol>
        <li>按钮样式：自动生成/手动上传；</li>
        <li>链接地址：自动生成二维码时，需要设置网页地址；</li>
        <li>生成二维码：点击按钮生成二维码，并且主视图更新显示二维码；</li>
        <li>上传二维码：手动上传时，选择二维码图片；</li>
      </ol>
    </p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559209118550-e3924742-4dad-4aea-a262-27552af6d25c.png?x-oss-process=image/resize,w_1022" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_10_9">9. 底部菜单</h2>
    <p>可以通过设置 通用属性 中的 固定布局/定位类型，来制作底部菜单导航等功能；</p>
    <p>
      <ol>
        <li>默认选中的tab按钮索引：从0开始，被设置索引对应的按钮高亮；</li>
        <li>操作类型：网页链接/页面跳转/弹层页面；</li>
        <li>网页地址：操作类型为网页链接时，需设置网页地址；</li>
        <li>页面id：操作类型为页面跳转时，需设置页面id，页面id即为左侧 页面-序号；</li>
        <li>弹层id：操作页面为弹层页面时，需设置弹层id，弹层id即为左侧 弹层-序号；</li>
      </ol>
    </p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559209825959-f3a5b0ae-6fd3-4f64-be8a-d47562c85453.png?x-oss-process=image/resize,w_1010" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_10_10">10. 微博墙</h2>
    <p>可以让用户在您的网站上针对某一热点话题进行实时讨论，用户在此发布微博将会发布到微博。</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559274496040-f4bc17be-560a-4846-b3c3-51f052ad48bc.png" alt="">
      </span>
    </p>
    <p></p>
    <p>
      <ol>
        <li>微博墙代码：设置微博墙代码；</li>
        <li>微博墙设置地址：点击链接，在新窗口打开微博直播组件配置页面；配置好话题/appkey等参数后，下方获取代码中的IFRAME会自动生成相关代码，将该代码选择复制后，粘贴到 微博墙代码 中；</li>
      </ol>
    </p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559274402213-db87fb5f-c256-405b-a23e-1d8109608724.png?x-oss-process=image/resize,w_642" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_10_11">11. 微博头像</h2>
    <p>在展示页面已经登陆微博账号的情况下，添加该组件会自动获取用户昵称和头像；</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559275836670-0c707c37-0331-45ea-84eb-90d7b175c866.png?x-oss-process=image/resize,w_800" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_10_12">12. 博文列表</h2>
    <p>用于微博博文展示；</p>
    <p>
      <ol>
        <li>添加博文：点击添加博文；</li>
        <li>博文mid：设置博文的mid；</li>
        <li>博文图片：设置博文截图；</li>
      </ol>
    </p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559289027550-29b8ddb9-005e-44ad-a393-c6a501e3b394.png" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_10_13">13. 转发博文组</h2>
    <p>
      <ol>
        <li>列表组件类型：微博详情项/ 微博图片详情项/微博粉丝项；</li>
        <li>分页器类型：分页器/分页器左右按钮；</li>
        <li>增加内容：点击添加博文项；</li>
        <li>mid：博文mid；具体获取博文mid的方法（ <a href="https://wiki.intra.sina.com.cn/pages/viewpage.action?pageId=177247011" target="_blank">详情</a> ）；</li>
        <li>博文截图：添加博文的截图；</li>
      </ol>
    </p>
    <h3>a. 微博详情项</h3>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559292221942-a7a91f0d-7c97-4a71-b75f-878e8375860e.png?x-oss-process=image/resize,w_974" alt="">
      </span>
    </p>
    <p></p>
    <p>移动端展示效果如下：</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559292793226-6449c144-6452-4443-b7e1-c7b81ed66aa1.png" alt="">
      </span>
    </p>
    <p></p>
    <h3>b. 微博图片详情项</h3>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559291135175-7ebd6491-0299-4a3a-9922-2b9a3b0c187e.png" alt="">
      </span>
    </p>
    <p></p>
    <p>移动端展示效果如下：</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559292250032-35ceb1ed-62fa-4acb-b675-a4f0e15ae7e3.png?x-oss-process=image/resize,w_362" alt="">
      </span>
    </p>

  </div>
</template>

<script>
  import { submenuMixin } from '@/views/child/doc/data/submenu';
  export default {
    mixins: [submenuMixin],
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/doc.scss';
</style>
